<template>
  <div>
    <!--房间类型-->
    <el-card>
      <el-row>
        <el-col :span="20">
          <el-select v-model="search.type" clearable placeholder="请选择房间类型">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.typeName"
              :value="item.id">
            </el-option>
          </el-select>
          <el-button type="primary" round icon="el-icon-search" @click="searchFn">搜索</el-button>
        </el-col>
        <el-col :span="4" align="right">
          <el-button type="primary"  icon="el-icon-plus" circle @click="show"></el-button>
        </el-col>
      </el-row>
    </el-card>

    <!--列表-->
    <el-card>
      <el-table
        :data="tableData"
        stripe
        style="width: 100%">
        <el-table-column
          prop="num"
          label="房间号">
        </el-table-column>
        <el-table-column
          prop="price"
          label="房间价格">
        </el-table-column>
        <el-table-column
          prop="typeName"
          label="房间类型">
        </el-table-column>
        <el-table-column
          prop="text"
          label="描述">
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="show(scope.$index,scope.row.id,)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="handleDelete(scope.$index,scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!--分页组件-->
    <el-card>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNum"
        background
        :page-sizes="[10, 20, 30, 40]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next,jumper"
        :total="page.total">
      </el-pagination>
    </el-card>

    <!--添加修改对话框-->
    <el-dialog
      :title="dialog.isEdit ? '编辑' : '添加'"
      :visible.sync="dialog.visible"
      width="30%">

      <!--表单-->
      <el-form ref="homeForm" :rules="homeRules" :model="home" label-width="80px">
        <el-form-item  prop="id" hidden="hidden">
          <el-input v-model="home.id"></el-input>
        </el-form-item>
        <el-form-item label="房间号" prop="num">
          <el-input v-model="home.num"></el-input>
        </el-form-item>
        <el-form-item label="房间价格" prop="price">
          <el-input v-model="home.price"></el-input>
        </el-form-item>
        <el-form-item label="房间类型" prop="hTypeId">
          <el-select v-model="home.hTypeId" clearable placeholder="请选择房间类型">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.typeName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="照片">
          <el-upload
            action="http://127.0.0.1:8080/image/uploadImg"
            list-type="picture-card"
            :file-list="fileList"
            :on-preview="handlePictureCardPreview"
            :on-success="uploadSuccess"
            :on-remove="deleteImg"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="描述" prop="text">
          <el-input v-model="home.text"></el-input>
        </el-form-item>
        <el-form-item label="房间状态" prop="state">
          <el-select v-model="home.state" clearable placeholder="请选择房间状态">
            <el-option
              v-for="(item,index) in homeState"
              :key="index"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>

        <!--操作按钮-->
        <el-form-item>
          <el-button type="primary" @click="saveHome('homeForm')">{{dialog.isEdit ? '立即修改' : '立即创建'}}</el-button>
          <el-button @click="dialog.visible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog :visible.sync="showImage" size="tiny">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import {getTypes} from "@/api/type";
import {getHomes, addHome, getSingleHome, saveEditedHome, deleteHome} from "@/api/home";
import {locDelImg} from "@/api/image";

export default {
  data(){
    return{
      options: [],//房类型
      search: {
        type:''
      },//选中的房间类型id
      tableData:[],//房间列表
      page:{
        pageNum:1,
        pageSize:10,
        total: 40
      },//页面信息
      dialog:{
        visible:false,
        isEdit:false//0 表示保存 1 表示编辑
      },//创建 / 编辑弹窗 信息
      home:{
        id:"",
        num:"",
        price:"",
        state:"",
        text:"",
        imageList:[],
        hTypeId:"",
      },//用于创建和编辑的房对象
      fileList:[],
      dialogImageUrl: '',//放大查看的当前图片的url
      homeState:["未入住","已入住","空房"],//房状态 可从后台获取
      homeRules: {
        num: [
          { required: true, message: '请输入房间号', trigger: 'blur' }
        ],
        price:[
          { required:true , message:'请输入房间价格',trigger:'blur'}
        ],
        hTypeId: [
          { required: true, message: '请选择房间类型', trigger: 'change' }
        ],
        state: [
          { required: true, message: '请选择房间状态', trigger: 'change' }
        ]
      },//表单验证集
      //图片弹框
      showImage: false,
    }
  },
  methods:{
    /**
     * 分页+条件查询
     */
    searchFn(){
      this.getHome();
    },
    /**
     * 修改每页显示条数
     * @param pageSize
     */
    handleSizeChange(pageSize){
      this.page.pageSize = pageSize;
      this.getHome();
    },
    /**
     * 修改页码
     * @param pageNum
     */
    handleCurrentChange(pageNum){
      this.page.pageNum = pageNum;
      this.getHome();
    },
    /**
     * 查询房间列表
     */
    getHome(){
      getHomes(this.page.pageNum,this.page.pageSize,this.search.type).then(response => {
        this.tableData = response.data.homes;
        this.page.total = response.data.total;
      })
    },
    /**
     * 弹出创建 + 修改弹窗
     */
    show(index,id){
      //重置表单
      if (this.$refs["homeForm"] != null) {
        this.$refs["homeForm"].resetFields();
        this.fileList = [];
      }
      this.dialog.visible = true;
      this.dialog.isEdit = (id != null);

      //渲染当前房间的所有信息
      if (this.dialog.isEdit) {
        getSingleHome(id).then(res => {
          const home = res.data;
          this.home = home;
          this.home.imageList = [];
        })
      }
    },
    /**
     * 删除房间
     * @param id
     */
    handleDelete(index,id){
      deleteHome(id).then(res => {
        if (res.code === 20000) {
          this.$message.success(res.message);
          this.getHome();
        }else {
          this.$message.error(res.message);
        }
      })
    },
    /**
     * 点击查看图片详情
     * @param file
     */
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.showImage = true;
    },
    /**
     * 图片上传成功
     * @param file
     * @param fileList
     */
    uploadSuccess(response, file, fileList){
      this.fileList = fileList;
    },
    /**
     * 删除图片方法
     * @param file
     * @param fileList
     */
    deleteImg(file){
      const url = file.response.data.url;
      const path = file.response.data.path;
      locDelImg(url,path).then(res => {
        if (res.code == 20000) {
          this.$message.success(res.message);
        }else{
          this.$message.error(res.message);
        }
      })
    },
    /**
     * 保存房间
     */
    saveHome(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.home.imageList = this.fileList.map(item => {
            return {
              "url":item.response.data.url,
              "path":item.response.data.finalPath
            }
          })
          if (this.dialog.isEdit) {
            //修改房间
            saveEditedHome(this.home).then(res => {
              this.$message.success(res.message);
              this.getHome();
            })
          }else {
            //添加房间
            addHome(this.home).then(res => {
              this.$message.success(res.message);
              this.getHome();
            })
          }
          this.dialog.visible = false;
        } else {
          return false;
        }
      });
    },
  },
  beforeMount() {
    getTypes().then(data=>{
      this.options = data.data;
    })
    this.getHome();
  }
}
</script>

<style scoped lang="scss">
.el-card{
  margin: 10px;
}

.el-select{
  margin-right: 10px;
}
</style>
<style scoped lang="scss">

</style>
